<template>
  <div id="register" class="clearfix">
    <app-header></app-header>
    <div class="reg_content">
      <div class="register gt">
        <div class="zhuce">
          <div class="title">
            注册
          </div>
          <div class="form">
            <input type="text" placeholder="账号（请输入手机号码）" class="account" v-model="phone">
            <div class="QRcode_div clearfix">
              <input type="text" placeholder="图形验证码" class="QR_code lf" v-model="imgCaptcha">
              <div class="graphic gt" v-on:click="captcha" v-html="imgCap"></div>
            </div>
            <div class="note">
              <input type="text" placeholder="短信验证码" class="note_code lf" v-model="smsCaptcha">
              <div class="checkCode gt" v-on:click="checkCode">查看验证码</div>
              <div class="verification gt" v-on:click="note_code">获取验证码</div>
            </div>
            <input type="password" placeholder="密码（请输入6~20位字符）" class="pwd" v-model="password">
            <input type="password" placeholder="确认密码" class="confirmPwd" v-model="password2">
            <div class="register_btn" v-on:click="register_btn">注册</div>
          </div>
        </div>
        <div class="toLogin clearfix">
          <span>已经有APIS账号了</span>
          <router-link to="/login" class="login_btn gt">登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from './header'
import {getSmsCaptcha,getNewsList,getImgCaptcha,receive_text,registerBtn} from '../api/example.js'
export default {
  name: 'register',
  data(){
    return{
      phone:"",
      imgCaptcha:"",//用户输入的图文验证码
      smsCaptcha:"",//用户输入的短信验证码
      password:"",
      password2:"",
      imgCap:"获取图形验证码", //图形码显示区域
    }
  },
  components:{
    'app-header':Header,
  },
  methods:{
    // 获取图文验证码
    captcha:function(){
      var vm=this;
      getImgCaptcha().then(res => {        
        vm.imgCap=res.data
      })
      .catch(err => {
        console.log(err)
      })
    },
    // 获取短信验证码
    note_code:function(){
      var vm=this;
      getSmsCaptcha(vm.phone,vm.imgCaptcha).then(res => {
        if(res.data.code === 'success'){
          console.log(res.data);
          alert("点击右侧按钮查看验证码")
        }else{
          alert("点击右侧按钮查看验证码")
        }
      })
        .catch(err => {
          //捕获错误
          console.log(err)
        })
    },
    // 查看短信验证码
    checkCode:function(){
      var vm=this;
      receive_text(vm.phone).then(res => {
        if(res.data.code === 'success'){
          console.log(res.data.smsCaptcha);
          alert(res.data.data.smsCaptcha)
        }else{
          alert(res.data.data.smsCaptcha)
        }          
      })
        .catch(err => {
          //捕获错误
          console.log(err)
        })
    },
    // 注册
    register_btn:function(){
      var vm = this;
      console.log(this.smsCaptcha);
      console.log(this.password);
      if(this.password == this.password2){
        registerBtn(vm.phone,vm.password,vm.smsCaptcha).then(res => {
          if(res.data.code === 'success'){
            console.log(res.data);
            alert('注册成功');
            this.$router.push({
              name: "login",
            });
          }else{
            alert(res.data.message)
          }
        })
          .catch(err =>{
            console.log(err)
          })
      }
    },
    // 判断是否登录
    judge:function(){
      if(localStorage.newstoken != 'undefined'){
        this.isShow=false
      }else{
        this.isShow=true
      }
    }
  },
  mounted(){
    this.judge();
  }
}
</script>

<style scoped>
  #register{
    width:100%;
  }
  .reg_content{
    height:860px;
    background: url(../assets/bg_sign.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }
  .register{
    width:568px;
    background: rgba(255,255,255,0.24);
    box-shadow: 6px 6px 14px 5px rgba(39,52,101,0.08);
    margin-top: 107.8px;
    margin-right: 197.9px;
    padding-top: 44.2px;
  }
  .zhuce{
    width:380px;
    margin:0 auto;
  }
  .zhuce .title{
    font-size: 36px;
    color: #FFFFFF;
    text-align:center;
  }
  .form{
    margin-top: 35px;
  }
  .form input{
    width:380px;
    height:56px;
    line-height: 56px;
    font-size: 16px;
    color: #9B9B9B;
    border: 1px solid #FFFFFF;
    border-radius: 2px;
    padding-left: 20.2px;
    margin-bottom: 18px;
  }
  .QRcode_div input{
    width:228px;
  }
  .note input{
    width:174px;
  }
  .graphic,.verification,.checkCode{
    margin-left: 12.2px;
    width:90px;
    display: inline-block;
    height: 54.7px;
    line-height: 54.7px;
    text-align: center;
    cursor: pointer;
    background: #FF8000;
    font-size: 16px;
    color:#fff;
  }
  .graphic{
    width:139.8px;
    background: #f5f5f5;
    color:#FF8000;
  }
  .graphic svg{
    width:100%;
    height:100%;
    padding-left: 34px;
  }
  .register_btn{
    margin:24.3px 0 39.7px;
    background: #FF8000;
    height:53px;
    line-height: 53px;
    text-align:center;
    font-size: 20px;
    color: #FFFFFF;
    cursor: pointer;
  }
  .toLogin{
    border-top: 1px solid #fff;
    height:76.4px;
    line-height: 76.4px;
  }
  .toLogin span{
    margin-left: 19.7px;
    font-size: 14px;
    color:#fff;
  }
  .toLogin .login_btn{
    display: inline-block;
    height:41px;
    line-height: 41px;
    padding:0 13px;
    background: #fff;
    margin:18px 41px 0 0;
    font-size: 20px;
    color: #0D407E;
    cursor: pointer;
  }
</style>
